import React, { memo, useMemo, useCallback } from 'react';
import { setExtra } from './../util'
import FileUpload from './../../fileUpload/FileUpload'
import { FileProps } from './../../fileUpload/interface';
import { UploadFile } from 'antd/lib/upload/interface';
interface IProps {
  id: string;
  value: string;
  onChange(value: string, id: string): void;
  extraInitialValue?: UploadFile<any>[],
  action?: string;
  accept?: string;
  only?: boolean
}

export default memo(({ id, onChange, action, accept, extraInitialValue, only }: IProps) => {

  const onOk = useCallback((files: FileProps[]) => {
    setExtra({ ['_' + id]: files });
    onChange(files.map(item => item.url).join(','), id);
  }, [id, onChange]);

  const defaultFileList = useMemo(() => {
    if (!extraInitialValue) return [];
    return extraInitialValue
  }, [extraInitialValue]);

  return (
    <FileUpload action={action} accept={accept} defaultFileList={defaultFileList} 
    isBtnMode onOkFiles={onOk}  only={only}/>
  )
})